<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header d-flex flex-row align-items-center bg-white p-20 b-b-2 ">
			<view class="search-box w-60" @click="goSearch">
				<input v-model.trim="filter.keyword" type="text" placeholder="请输入关键字" />
				<image class="search-img" src="../../static/search.svg"></image>
			</view>
			<view class="w-40 d-flex flex-row justify-content-evenly m-l-20">
				<button class="uni-button" open-type="getUserInfo" @click="handleGetUserInfo">
					<image class="img-42" src="../../static/user.svg"></image>
				</button>
				<button class="uni-button" open-type="contact">
					<image class="img-42" src="../../static/service.svg"></image>
				</button>
				<button class="uni-button" open-type="feedback">
					<image class="img-42" src="../../static/message.svg"></image>
				</button>
				<button class="uni-button" open-type="share">
					<image class="img-42" src="../../static/share.svg"></image>
				</button>
			</view>
		</view>
		
		<view class="main d-flex flex-row">
			<!-- 左侧 -->
			<view class="category-box w-20">
				<scroll-view scroll-y show-scrollbar="false">
					<view 
						v-for="(item,index) in categories" 
						:key="item.id" 
						class="item"
						:class="cate_index ? (index==cate_index ? 'active' : '') : (index == 0 ? 'active' : '')"
						@click="changeCategory(index)">
						{{item.title}}
					</view>
				</scroll-view>
			</view>
			
			<!-- 右侧 -->
			<view class="list-box w-80 b-l-1">
				<!-- 显示默认排序 -->
				<view class="order d-flex flex-row justify-content-between align-items-center p-30 b-b-1">
					<view class="lable">排序</view>
					<view class="picker">
						<view class="select d-flex flex-row align-items-center align-content-between">
							<picker @change="bindPickerChange" :value="order_index" :range="order_array" range-key="title">
								<view class="uni-input">{{order_array[order_index].title}}</view>
							</picker>
							<image v-if="direction=='bottom'" class="img-36" src="../../static/bottom2.svg"></image>
							<image v-else class="img-36" src="../../static/top2.svg"></image>
						</view>
						
					</view>
				</view>
				
				<!-- 显示祝福语 -->
				<scroll-view  @scrolltolower="search" scroll-y show-scrollbar="false" class="greet-scroll-view">
					<template v-if="categories[cate_index]">
						<view v-for="(item,index) in categories[cate_index].greets" :key="item.id" class="item">
							<view class="content" @click="goView(item)">{{item.content}}</view>
							<view class="footer d-flex flex-row justify-content-between align-content-center align-items-center">
								<view class="quanity">
									<text v-if="item.copy_count>10">{{item.copy_count}} 热度</text>
								</view>
								<view @click="copy(item.content)" class="copy d-flex flex-row justify-content-between align-items-center">
									<image class="img-25" src="../../static/copy.svg"></image>
									<view class="font-color-white title">点击复制</view>
								</view>
							</view>
						</view>
						
						<view v-if="categories[cate_index].ending" class="d-flex align-content-center justify-content-center p-40 font-color-gray font-size-26">
							暂无更多了😊，欢迎您来信建议(顶部有信箱噢)
						</view>
					</template>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCategories} from "../../api/categories.js";
	import {getGreetings} from "../../api/greets.js";
	import {mapMutations,mapActions} from 'vuex';
	import {get,post} from "/utils/request2.js";
	import {uniLogin,uniGetUserProfile} from '../../utils/auth.js';
	
	export default {
		data() {
			return {
				filter: {
					keyword: '',
					order: 'heat',
					order_title: '按热度',
				},
				cate_index: 0,
				categories:[],
				order_index: 0,
				order_array: [
					{name:'created_at',title: '按时间'},
					{name:'copy_count',title: '按热度'},
				],
				direction: 'bottom',
				dataLoading: false,
			}
		},
		
		onLoad() {
			get('categories').then(res => {
				let data = res.map((item,index)=>{
					item.page = 0;
					item.ending = false;
					item.greets = new Array();
					return item;
				});
				this.categories = data;
				this.search();
			});
		},
		methods: {
			...mapActions([
				'login',//将 this.login() 映射为 this.$store.commit('login')
			]),
			search()
			{
				if (this.categories[this.cate_index].ending) {
					return false;
				}
				const params = {
					category_id: this.categories[this.cate_index].id,
					page: ++this.categories[this.cate_index].page,
					sort: this.order_array[this.order_index],
				};
				get('greetings', params).then(data => {
					this.categories[this.cate_index].page = data.current_page;
					this.categories[this.cate_index].greets = this.categories[this.cate_index].greets.concat(data.data);
					if(!data.data || !data.data.length){
						this.categories[this.cate_index].ending = true;
					}
				}).catch(res => {});
			},
			changeCategory(index)
			{
				this.cate_index = index;
				this.search();
			},
			bindPickerChange: function(e) {
				this.order_index = e.target.value;
				this.categories[this.cate_index].page = 0;
				this.search();
			},
			copy(content)
			{
				uni.setClipboardData({
					data: content,
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none',
						})
					}
				})
				
			},
			goView(item)
			{
				uni.navigateTo({
					url:`./view?id=${item.id}`
				})
			},
			goSearch(){
				uni.navigateTo({
					url:'./search'
				})
			},
			//分享小程序
			share()
			{
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 1,
				    summary: "笔中情节假日祝福语，总有一款适合你！",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			getPhoneNumber(e){
				console.log(e);
			},
			//提前授权
			authorize(){
				
				
			},
			async handleGetUserInfo()
			{
				//获取用户信息
				const userInfo = await uniGetUserProfile();
				
				//获取code
				const code = await uniLogin();
				
				//发送code、userInfo信息给后端进行登录注册用户，将登录后返回的token和用户信息保存到本地缓存
				post('auth/login',{code, userInfo}).then((res)=>{
					uni.setStorageSync('token', res.token);
					uni.setStorageSync('userInfo', userInfo);
					uni.showToast({
						title:'登录成功',
						icon:'none'
					})
				}).catch(res => {
					uni.showToast({
						title:'登录失败',
						icon:'none'
					})
				});
			},
			handleGetPhoneNumber(e){
				console.log(e);
			},
		}
	}
</script>

<style lang="scss">
	
</style>
